<template>
  <div>
    <Meta v-if="showInfo.name!==undefined" pagealias="cityinfo_telshow" :custom_data="{title:showInfo.name}" />
    <Head>详情</Head>
    <div class="banner">
      <img src="../../../assets/images/cityinfo/list-show-bg.png" alt="">
    </div>
    <div class="details">
      <div class="photo">
        <img :src="showInfo.logo_url" alt="">
      </div>
      <div class="title">{{showInfo.name}}</div>
      <ul class="info">
        <li class="info_item info_icon_1 substring">{{showInfo.publish_tel? showInfo.publish_tel : '暂无'}}</li>
        <li class="info_item info_icon_2 substring">{{showInfo.mobile ? showInfo.mobile : '暂无'}}</li>
        <li class="info_item info_icon_3 substring">{{showInfo.weixin ? showInfo.weixin : '暂无'}}</li>
        <li class="info_item info_icon_4"><p class="substring2">{{showInfo.address_detail ? showInfo.address_detail : '暂无'}}</p></li>
      </ul>
    </div>
    <div class="handle">
      <div class="btn btn_bg_1 btn_width_1" @click="addMailList">保存到通讯录</div>
      <div class="btn btn_bg_1 btn_width_2" @click="addWxCode">加TA微信</div>
      <a class="btn btn_bg_2 btn_width_3" :href="'tel:' + (showInfo.mobile ? showInfo.mobile : showInfo.publish_tel)">打电话</a>
    </div>
    <!-- 保存通讯录二维码弹窗 -->
    <van-popup v-model="showPopup">
      <p class="popup_title">通讯录二维码</p>
      <div class="code">
        <img :src="qrcode" alt="">
      </div>
      <p class="popup_tip">长按图标识别二维码即可保存到通讯录了</p>
    </van-popup>
    <!-- 添加微信好友二维码弹窗 -->
    <van-popup v-model="wxCode">
      <p class="popup_title">名片二维码</p>
      <div class="code">
        <img :src="showInfo.qrcode_url" alt="">
      </div>
      <p class="popup_tip">长按图标识别二维码即可添加好友</p>
    </van-popup>
  </div>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
export default{
  data () {
    return {
      showPopup: false, // 保存通讯录弹窗状态
      showId: null, // 详情id
      showInfo: {}, // 详情信息
      qrcode: null, // 通讯录二维码路径
      wxCode: false // 加他微信弹窗状态
    }
  },
  created () {
    this.showId = this.$route.params.showId
    this.getShowData()
  },
  methods: {
    getShowData () {
      http.get(api.phone_book_info, {id: this.showId}).then(res => {
        if (res.code == 200) {
          this.showInfo = res.data
        }
      })
    },
    addMailList () {
      // https://74cmsse.tywangcai.com/v1_0/home/qrcode/index?url=https://74cmsse.tywangcai.com/m/job/114
      // https://74cmsse.tywangcai.com/v1_0/home/qrcode/index?url= &type=normal
      // 'https://api.pwmqr.com/qrcode/create/?url='
      this.qrcode = 'https://74cmsse.tywangcai.com/v1_0/home/qrcode/index?url=' + `MECARD:N:${this.showInfo.name};TEL:${this.showInfo.mobile};ADR:${this.showInfo.address_detail};` + '&type=normal'
      this.showPopup = true
    },
    addWxCode () {
      console.log()
      if (this.showInfo.qrcode_url) {
        this.wxCode = true
      } else {
        this.$toast({message: '尚未设置微信二维码,请通过其他方式沟通', position: 'top'})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.banner{
  height:165px;
  img{
    width: 100%;
    height: 165px;
  }
}
.details{
  width:345px ;
  margin: -60px auto 0;
  position: relative;
  background: #fff;
  padding: 55px 20px 36px 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,30%);
  min-height: 390px;
  border-radius: 10px;
  .photo{
    width:64px;
    height:64px;
    background: #fff;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -32px;
    box-shadow: 0px 0px 10px rgba(0,0,0,10%);
    img{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    color:#333333;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 25px;
  }
  .info{
    .info_item{
      padding: 13px 0;
      border-bottom: 1px solid #e8e8e8;
      color:#333333 ;
      font-size: 15px;
      padding-left: 43px;
    }
    .info_icon_1{
      background:url(../../../assets/images/cityinfo/list-show-tel.png) no-repeat 5px center /21px 21px;
    }
    .info_icon_2{
      background:url(../../../assets/images/cityinfo/list-show-mobile.png) no-repeat 5px center /21px 21px;
    }
    .info_icon_3{
      background:url(../../../assets/images/cityinfo/list-show-wx.png) no-repeat 5px center /21px 21px;
    }
    .info_icon_4{
      background:url(../../../assets/images/cityinfo/list-show-address.png) no-repeat 5px 16px /21px 21px;
    }
  }
}
.handle{
  width:345px ;
  display: flex;
  position:absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  .btn{
    color:#ffffff ;
    font-size: 17px;
    height: 45px;
    border-radius: 5px;
    margin-right: 15px;
    text-align: center;
    line-height: 45px;
    &:last-child{
      margin-right: 0;
    }
  }
  .btn_bg_1{
    background: #1989f9;
  }
  .btn_bg_2{
    background: #ff4813;
  }
  .btn_width_1{
    width: 120px;
  }
  .btn_width_2{
    width: 110px;
  }
  .btn_width_3{
    width: 90px;
  }
}
.van-popup{
  width: 230px;
  height: 230px;
  border-radius: 10px;
  padding: 20px 0 20px;
  text-align: center;
  .popup_title{
    color:#222222 ;
    font-size: 15px;
  }
  .code{
    height: 111px;
    margin: 20px 0 20px;
    img{
      width: 111px;
      height: 111px;
    }
  }
  .popup_tip{
    color:#999999 ;
    font-size: 11px;
  }
}
</style>
